<template>
  <div class="search">
  <!-- 搜索框 -->
  <van-search
    v-model="value"
    shape="round"
    background="#222"
    placeholder="请输入搜索关键词"
    show-action
    @cancel="onCancel"
    @search="onSearch"
  />
  <div class="search-box">
    <h1>热门搜索</h1>
    <ul>
      <li v-for="(item, index) in list" :key="index +  1">
        <i>{{index}}</i>
        <span>{{item.searchWord}}</span>
        <p>{{item.content}}</p>
      </li>
    </ul>
  </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search } from 'vant'
import { getHot } from '@/api'
Vue.use(Search)
export default {
  name: '',
  data () {
    return {
      value: '',
      list: [],
      keywords: ''
    }
  },
  mounted () {
    getHot().then(res => {
      this.list = res.data.data
    })
  },
  methods: {
    onCancel () {
      this.$router.go(-1)
    },
    onSearch () {
      const keywords = this.value
      this.$router.push({ name: 'seek', params: { keywords } })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-search__action{
  color: #ffffffa1;
}
.search{
  background: #222;
  overflow: auto;
  .search-box{
    padding: 0 0.15rem;
    overflow: auto;
  }
  h1{
    line-height: 0.3rem;
    color: #ffcd32;
  }
  i{
    color:red;
    font-size: 0.27rem;
    margin-right: 0.15rem;
  }
  span{
    font-weight: bold;
    color: #fff;
  }
  p{
    font-size: 0.11rem;
    margin-left: 0.25rem;
    color: rgba(255, 255, 255, 0.452);
  }
}
</style>
